<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="yes" name="mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <title>Bugout client test page</title>
  <link href="style.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/mode/javascript/javascript.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/addon/edit/matchbrackets.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css" rel="stylesheet">
  <script src="bugout.min.js" type="application/javascript"></script>
</head>
<body>
<img src="bugout-logo.svg"/>
<h3>Demo client</h3>
<p class="instructions">This demo connects to a live Bugout server using its public address and then runs the "ping" function on that server and displays the result in the log below.</p>
<p class="instructions">You can also <a href="server.html" target="_NEW">run a copy of the Bugout server in your own browser tab</a> to try it out locally on your machine.</p>
<pre><code id="source" class="javascript">
// connect to server using its public address
var b = new Bugout(window.location.hash.substr(1) || "bUH7ukDvd9R2xLLRKMKWZ1mGPkgdVfufye");

log("My address is " + b.address())();
log("Connecting to the server...\n(this can take a minute)")();

// wait for connection to the server
b.on("server", function() {
  // ok, we're connected
  log("Connected to the server.")();
  // make an RPC API call on the server and log the result
  b.rpc("ping", {"Hello": "world"}, log("response:"));
  // watch for {"Hello": "world", "pong": true} in the log below
  // show a simple UI for testing the server API
  showUI();
});

// also watch for other peers joining this server's swarm
b.on("seen", log("seen:"));

</code></pre>
<div id="ui" style="display: none;">
  <textarea id="user">
// make your own calls to the server
b.rpc("ping", {"Hello": "world"}, log("response:"));
  </textarea>
  <button id="run">run</button>
</div>
<h3>Log</h3>

<pre id="log"></pre>
</body>
<script>
hljs.initHighlightingOnLoad();

// log events as they happen
function log(prefix) {
  return function() {
    var args = Array.prototype.slice.call(arguments);
    var msg = prefix + " " +
      args.map(function(a) {
        return (a ? JSON.stringify(a) : "");
      }).join(" ") + "\n";
    document.getElementById("log").textContent += msg;
    console.log(msg);
  }
}

var source = document.getElementById("source");
var user = document.getElementById("user");

// update the address if one was passed in
var address = window.location.hash.substr(1);
if (address) {
  source.textContent = source.innerHTML.replace("7Z3mcHq86AS7znzudowr8DhheFKuSL6VpZALmRARCej1", address);
  var instructions = document.getElementsByClassName("instructions");
  for (var i=0; i<instructions.length; i++) {
    instructions[i].style.display = "none";
  }
}

// reference to the codemirror editor
var editor = null;

// function to show the rpc ui once connected
function showUI() {
  document.getElementById("ui").style = "block";
  // add a codemirror editor
  editor = CodeMirror.fromTextArea(document.getElementById("user"), {
    lineNumbers: true,
    matchBrackets: true,
    continueComments: "Enter",
    extraKeys: {"Ctrl-Q": "toggleComment"}
  });
  editor.setSize(null, 80);
}

// when the user clicks the reload button
document.getElementById("run").onclick = function() {
  editor.save();
  eval(user.value);
}

// run the code in the pre tags
eval(source.innerHTML);
</script>
</html>
